<template>
  <view class="" v-if="show" :class="ggclass" @click="$emit('click', $event)">
    <slot v-bind="slotData"></slot>
  </view>
</template>

<script setup lang="ts">
import {defineProps, reactive,watchEffect,toRefs, getCurrentInstance} from 'vue'
const {proxy} = getCurrentInstance() as any;
	import {
		dateFilter
	} from '../ways/filter.js'
		const props= defineProps( {
			auths: {
				type: Array,
				default: () => [1]
			},
			name: {
				type: String,
				default: ''
			},
			api: {
				type: String,
				default: ''
			},
			rangeKey: {
				type: String,
				default: 'result'
			},
			ggclass: {
				type: String,
				default: ''
			},
			params: {
				type: Object,
				default: () => {
					return {}
				}
			},
			authKey: {
				type: [String, Number],
				default: 0
			}
		})
		const state = reactive({
				slotData: {},
				show: false
			})
			const {slotData, show} = toRefs(state)
			watchEffect(()=>{
				let boo = (props.auths||[]).includes(props.authKey)
				state.show = boo
				// let boo = (props.auths || []).includes(1)
				if (boo && props.api) {
					let req = typeof props.api === 'function' ? (props.api as Function).bind(props, props.params) : proxy.$http.get.bind(proxy
						.$http,
						props.api, props.params)
					req().then((res:any) => {
						state.slotData = res[props.rangeKey] || {}
						proxy.$emit('input', state.slotData)
					})
				}
			})


</script>

<style scoped>
</style>